<template>
  <div class="verification">
    <Back-Arrow></Back-Arrow>
    <div class="phone-img">
      <img src="../../../static/images/login/verification.png"
           alt="">
    </div>
    <div class="phone-form">
      <div class="phone-num">
        <i>
          <img src="../../../static/images/login/username.png"
               alt="">
        </i>
        <input type="number"
               placeholder="请输入手机号码"
               v-model="phoneVal">
      </div>
      <div class="auth-code">
        <i>
          <img src="../../../static/images/login/password.png"
               alt="">
        </i>
        <input type="text"
               placeholder="请输入验证码"
               v-model="authCode">
        <button @click="onGain"
                :class="{'gain-ver': isGain}"
                :disabled="isGain">获取验证码</button>
      </div>
    </div>
    <My-Button :text="'下一步'"
               @click.native="OnNextStep"></My-Button>
    <Err-Hint v-if="hint"
              :errInfo="errInfo"></Err-Hint>
  </div>
</template>

<script>
import MyButton from '@/commonCom/Button-but'
import BackArrow from '@/commonCom/backBtn'
import ErrHint from '@/commonCom/errHint'
export default {
  name: 'numberVer',
  components: {
    MyButton,
    BackArrow,
    ErrHint
  },
  data () {
    return {
      isGain: false,
      num: 59,
      phoneVal: '',
      authCode: '',
      hint: false,
      errInfo: {}
    }
  },
  methods: {
    OnNextStep () {
      if (this.phoneVal.trim() === '') {
        this.codeHint('手机号码不能为空')
      } else if (this.codeVerification(this.phoneVal.trim())) {
        if (this.authCode.trim()) {
          this.verification()
        } else {
          this.codeHint('验证码不能为空')
        }
      } else {
        this.codeHint('请输入正确的手机号')
      }
    },
    // 验证码确认
    verification () {
      const Qs = require('qs')
      let obj = {
        phoneNum: this.phoneVal,
        code: this.authCode
      }
      this.$http.post(`${this.baseUrl.validate}`, Qs.stringify(obj), {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' },
        emulateJSON: true
      }).then((res) => {
        if (res.data.code === 500) {
          this.codeHint(res.data.msg)
        } else {
          this.$router.push({ path: '/Register/regPhone',
            query: {
              phone: this.phoneVal
            } })
        }
      }, (reject) => {
        this.codeHint('验证失败')
      })
    },
    onGain (e) {
      const Qs = require('qs')

      if (this.phoneVal.trim() === '') {
        this.codeHint('手机号码不能为空')
        return
      }
      if (!this.codeVerification(this.phoneVal)) {
        this.codeHint('请输入正确的手机号')
      } else {
        this.$http.post(`${this.baseUrl.authCode}`, Qs.stringify({ phoneNum: this.phoneVal }), {
          headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' },
          emulateJSON: true
        }).then((res) => {
          if (res.data.code === 500) {
            this.codeHint(res.data.msg)
          }
          console.log(res)
        })
        let t = setInterval(() => {
          e.target.innerHTML = this.num + '重新发送'
          this.num--
          if (this.num <= 0) {
            this.isGain = false
            this.num = 59
            e.target.innerHTML = '获取验证码'
            clearInterval(t)
          }
        }, 1000)
        this.isGain = true
      }
    },
    codeVerification (phone) {
      let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
      return reg.test(phone)
    },
    codeHint (text) { // 验证提示
      this.errInfo = {
        text: text
      }
      this.hint = true
      setTimeout(() => {
        this.hint = false
      }, 1000)
    },
    countDown () {
    }
  }
}
</script>

<style lang="stylus" scoped>
.verification {
  .phone-img {
    text-align: center;
    padding: 0.9rem 0 0.7rem;

    img {
      width: 2.8rem;
    }
  }

  .phone-form {
    text-align: center;

    i {
      position: absolute;
      top: 0.24rem;
      padding-left: 0.2rem;

      img {
        width: 0.32rem;
      }
    }

    input {
      height: 0.8rem;
      margin-bottom: 0.4rem;
      border-radius: 6px;
      background-color: rgb(246, 245, 245);
      color: rgb(153, 153, 153);
      text-indent: 0.8rem;
    }

    .phone-num {
      position: relative;

      input {
        width: 6rem;
      }
    }

    .auth-code {
      position: relative;

      input {
        width: 3.5rem;
      }

      button {
        height: 0.8rem;
        width: 2.3rem;
        margin-left: 0.2rem;
        margin-bottom: 0.4rem;
        border-radius: 6px;
        background-color: rgb(210, 23, 51);
        color: #fff;
      }

      .gain-ver {
        background-color: rgb(255, 157, 172);
        color: #fff;
      }
    }
  }
}
</style>
